<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .ta {
            border-collapse: collapse;
        }
        .ta th, .ta td {
            border: 1px solid black;
            padding: 5px;
        }
        .confirm-div {
            background-color: #bbb;
            display: flex;
            overflow: hidden;
            overflow-x: auto;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-end;
            margin-bottom: 20px;
            padding-top: 45px;
        }
        .confirm-div>.item {
            display: inline-block;
            width: 50px;
            background-color: rgb(44, 160, 255);
            vertical-align: bottom;
            margin: 2px;
            position: relative;
        }
        .date {
            position: absolute;
            top: -40px;
            left: 0px;
        }
        .holder {
            width: 50px;
        }

    </style>
    <script src="./jquery-1.9.0.js"></script>
    <script src="../template.js"></script>
    <title>Document</title>
    <script>
        // https://news.qq.com/zt2020/page/feiyan.htm
        let arr = [
            "confirm",
            "dead", "deadRate",
            "heal", "healRate",
            "importedCase",
            "infect",
            "localConfirmadd",
            "localinfectionadd",
            "suspect"
        ];
        function loadData() {
            $.ajax({
                url: "https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list",
                data: {modules: "chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare"},
                type: "post",
                dataType: "json"
            }).done((result)=>{
                result.data.arr = arr;
                console.log(result);
                let html = template("ta", result.data);
                $("#tb").html(html);

                let confirmHtml = template("confirmTemplate", result.data);
                $(".confirm-div").html(confirmHtml);
            });
/**
confirm: 131 确诊
date: "01.09" 日期
dead: 2 死亡
deadRate: "1.5" 死亡率
heal: 89 治愈
healRate: "67.9" 治愈率
importedCase: 21 境外输入
infect: 27 无症状感染者
localConfirmadd: 48 本地新增确诊
localinfectionadd: 0 新增的无症状感染者
suspect: 0 疑似
y: "2021" 年
*/
        }
        $(loadData);
    </script>
</head>
<body>
    <button onclick="loadData()" >loadData</button>
    <hr>
    <table class="ta" >
        <thead>
            <tr>
                <td>日期</td>
                <td>确诊</td>
                <td>死亡</td>
                <td>死亡率</td>
                <td>治愈</td>
                <td>治愈率</td>
                <td>境外输入</td>
                <td>无症状感染者</td>
                <td>本地新增确诊</td>
                <td>新增的无症状感染者</td>
                <td>疑似</td>
            </tr>
        </thead>
        <tbody id="tb" ></tbody>
    </table>
    <script id="ta" type="text/html" >
        {{each chinaDayAddList cda}}
        <tr>
            <td>{{cda.y + '.' + cda.date}}</td>
            {{each arr pro }}
            <td>{{cda[pro]}}</td>
            {{/each}}
        </tr>
        {{/each}}
    </script>
    <hr>
    <h2>确诊人数:</h2>
    <div class="confirm-div" >
        <div class="item" style="height: 50px;">
            <div class="date" >
                <div>2021</div>
                <div>01.09</div>
            </div>
        </div>
        <div class="item" style="height: 150px;">
            <div class="date" >
                <div>2021</div>
                <div>01.10</div>
            </div>
        </div>
        <div class="item" style="height: 90px;">
            <div class="date" >
                <div>2021</div>
                <div>01.11</div>
            </div>
        </div>
    </div>
    <script id="confirmTemplate" type="text/html" >
        {{each chinaDayAddList cda}}
        <div class="item" style="height: {{cda.confirm}}px;">
            <div class="date" >
                <div>{{cda.y}}</div>
                <div>{{cda.date}}</div>
            </div>
            <div class="holder" ></div>
        </div>
        {{/each}}
    </script>
</body>
</html>